<template>
  <view class="u-p-20">
    <u-form :model="form" ref="uForm" label-position="top">
      <u-form-item :label="f.label" :key='f.value' v-for="f in formResult.fields">
        <!-- 图片 -->
        <view v-if="f.type === 'IMAGE_UPLOAD'">
          <image class="images" v-for="img in getDataValue(f.value)" :key="img.url" :src="img.url">
          </image>
        </view>
        <!-- 排序 -->
        <view v-else-if="f.type === 'SORT'">
          <view v-for="sort in getDataValue(f.value)" :key="sort.index">
            <text class="sort">{{sort.value}}</text>
            <text>{{sort.label}}</text>
          </view>
        </view>
        <!-- 矩阵选择 -->
        <view v-else-if="f.type==='MATRIX_SELECT'">
          <u-table>
            <u-tr v-for="matrix in getDataValue(f.value)" :key="matrix.index">
              <u-th>{{matrix}}</u-th>
            </u-tr>
          </u-table>
        </view>
        <!-- 矩阵下拉 -->
        <view v-else-if="f.type==='MATRIX_DROPDOWN'">
          <u-table>
            <u-tr v-for="dropdown in getDataValue(f.value)" :key="dropdown.index">
              <u-th v-for="ww in dropdown" :key="ww.index">{{ww.label}}</u-th>
            </u-tr>
          </u-table>
        </view>
        <!-- 矩阵填空 -->
        <view v-else-if="f.type==='MATRIX_INPUT'">
          <u-table>
            <u-tr v-for="input in getDataValue(f.value)" :key="input.index">
              <u-th v-for="blanks in input" :key="blanks.index">{{blanks}}</u-th>
            </u-tr>
          </u-table>
        </view>
        <!-- 矩阵滑块 -->
        <view v-else-if="f.type==='MATRIX_SLIDER'">
          <u-table>
            <u-tr v-for="slider in getDataValue(f.value)" :key="slider.index">
              <u-th>{{slider}}</u-th>
            </u-tr>
          </u-table>
        </view>
        <!-- 矩阵量表 -->
        <view v-else-if="f.type==='MATRIX_SCALE'">
          <u-table>
            <u-tr v-for="scale in getDataValue(f.value)" :key="scale.index">
              <u-th>{{scale}}</u-th>
            </u-tr>
          </u-table>
        </view>
        <!-- 文件上传 -->
        <view v-else-if="f.type === 'UPLOAD'">
          <u-link v-for="upload in getDataValue(f.value)" :key="upload.url" :src="upload.url" color='#000000'>
            {{upload.name}}
          </u-link>
        </view>
        <!-- 签名 -->
        <view v-else-if="f.type === 'SIGN_PAD'">
          <image class="images" :src="getDataValue(f.value)">
          </image>
        </view>
        <!-- 预约日期 -->
        <view v-else-if="f.type === 'RESERVE_DAY'">
          <text v-for="day in getDataValue(f.value)" :key="day.index">{{day}}</text>
        </view>
        <!-- 员工选择 -->
        <view v-else-if="f.type === 'USER_SELECT'">
          <view v-for="select in getDataValue(f.value)" :key="select.id">
            <text class="select">{{select.nickName}}</text>
            <text>{{select.name}}</text>
          </view>
        </view>
        <!-- 员工选择 -->
        <view v-else-if="f.type === 'DEPT_SELECT'">
          <view v-for="deptSelect in getDataValue(f.value)" :key="deptSelect.id">
            <text>{{deptSelect.name}}</text>
          </view>
        </view>
        <!-- 省市联动 -->
        <view v-else-if="f.type === 'PROVINCE_CITY'">
          <view v-for="city in getDataValue(f.value)" :key="city.id">
            <text>{{city}}</text>
          </view>
        </view>
        <!-- 商品 -->
        <view v-else-if="f.type === 'GOODS_SELECT'">
          <view v-for="goods in getDataValue(f.value)" :key="goods.id">
            <text>{{goods}}个</text>
          </view>
        </view>
        <view v-else-if="f.type === 'SUB_FORM'" class="subforn-warp">
          <view class="table">
            <u-table>
              <u-tr>
                <u-th class="th" v-for="child in f.scheme.childList" :key="child.vModel">{{child.config.label}}</u-th>
              </u-tr>
              <u-tr v-for="subValue in getDataValue(f.value)" :key="subValue.index">
                <u-td class="td" v-for="child in f.scheme.childList" :key="child.vModel">
                  {{formatSubFormValue(subValue,child.vModel)}}
                </u-td>
              </u-tr>
            </u-table>
          </view>
        </view>
        <view v-else>
          {{formatFieldValue(f.value)}}
        </view>
      </u-form-item>
    </u-form>
  </view>
</template>

<script>
  /**
   * 是否是具有label值得组件
   */
  import _ from "lodash";

  function isLabelTag(key) {
    return _.startsWith(key, 'radio') || _.startsWith(key, 'checkbox') ||
      _.startsWith(key, 'select') || _.startsWith(key, 'image_select') ||
      _.startsWith(key, 'cascader');

  }
  export default {
    props: {
      formResult: {},
    },
    data() {
      return {

      }
    },
    created() {},
    methods: {
      getDataValue(key) {
        return this.formResult.data.originalData[key] || ""
      },
      // 默认格式处理
      formatFieldValue(key) {
        // 判断是不是选择型
        if (isLabelTag(key)) {
          return this.formResult.data.originalData[key + 'label']||""
        }
        return this.formResult.data.originalData[key] || ""
      },
      filterField() {
        return formResult.fields
      },
      // 格式化子表单字段显示
      formatSubFormValue(data, key) {
        const value = data[key]
        // 如果是对象 
        if (value instanceof Object) {
          return JSON.stringify(value)
        }
        return value
      }
    }
  }
</script>

<style lang="scss">
  .sort {
    display: inline-block;
    margin-right: 10rpx;
    height: 40rpx;
    width: 40rpx;
    background-color: skyblue;
    border-radius: 50%;
    text-align: center;
    line-height: 40rpx;
  }

  .images {
    width: 100rpx;
    height: 100rpx;
  }

  .select {
    margin-right: 20rpx;
  }

  .td {
    overflow: hidden;
    overflow-x: auto
  }

  .th {
    width: 130rpx;
  }

  .subforn-warp {
    width: 700rpx;
    overflow-x: auto;
  }

  .table {
    width: 1400rpx;
  }
</style>